import React from 'react';
import PropTypes from 'prop-types';
import { Dialog, Table } from '@teamix/ui';
import intl from '../../../../locale';

const prefix = 'upgrade-compare-modal';

export default class CompareModal extends React.Component {
  static propTypes = {
    trigger: PropTypes.element,
    closeModal: PropTypes.func,
    // isModalOpen: PropTypes.bool,
  };

  static defaultProps = {
    trigger: null,
    closeModal: () => {},
  };

  constructor(props) {
    super(props);
    this.state = {
      isModalOpen: false,
      keyMap: {
        name: intl.get({
          id: 'code-assets.containers.step1.compareModal.Noun',
          defaultMessage: '名词',
        }),
        repoVisibility: intl.get({
          id: 'code-assets.containers.step1.compareModal.ProjectPublicity',
          defaultMessage: '项目公开性',
        }),
        groupVisibility: intl.get({
          id: 'code-assets.containers.step1.compareModal.ProjectTeamPublicity',
          defaultMessage: '项目组公开性',
        }),
        groupAccess: intl.get({
          id: 'code-assets.containers.step1.compareModal.ProjectGroupPermissions',
          defaultMessage: '项目组权限',
        }),
        repoAccess: intl.get({
          id: 'code-assets.containers.step1.compareModal.ProjectPermissions',
          defaultMessage: '项目权限',
        }),
      },

      tableMap: {
        name: [
          {
            old: intl.get({
              id: 'code-assets.containers.step1.compareModal.Project',
              defaultMessage: '项目',
            }),
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.CodeBase',
              defaultMessage: '代码库',
            }),
          },

          {
            old: intl.get({
              id: 'code-assets.containers.step1.compareModal.ProjectTeam',
              defaultMessage: '项目组',
            }),
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.CodeGroup',
              defaultMessage: '代码组',
            }),
          },
        ],

        repoVisibility: [
          {
            old: 'public',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.NoCorrespondingPublicity',
              defaultMessage: '无对应公开性',
            }),
          },

          {
            old: 'internal',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.NoCorrespondingPublicity',
              defaultMessage: '无对应公开性',
            }),
          },

          {
            old: 'private',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.PrivateVisibleOnlyToMembers',
              defaultMessage: '私有(仅代码库成员可见)',
            }),
          },

          {
            old: '-',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.VisibleToEnterpriseAccessibleTo',
              defaultMessage: '企业可见(企业内成员可访问)',
            }),
          },
        ],

        groupVisibility: [
          {
            old: intl.get({
              id: 'code-assets.containers.step1.compareModal.NonPublic',
              defaultMessage: '非public',
            }),
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.VisibleToEnterpriseAccessibleTo',
              defaultMessage: '企业可见(企业内成员可访问)',
            }),
          },

          {
            old: 'public',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.VisibleToEnterpriseAccessibleTo',
              defaultMessage: '企业可见(企业内成员可访问)',
            }),
          },
        ],

        groupAccess: [
          {
            old: 'Owner',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.GroupManager',
              defaultMessage: '组管理者',
            }),
          },

          {
            old: 'Master',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.GroupManager',
              defaultMessage: '组管理者',
            }),
          },

          {
            old: 'Developer',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.GroupDeveloper',
              defaultMessage: '组开发者',
            }),
          },

          {
            old: 'Reporter',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.GroupViewer',
              defaultMessage: '组浏览者',
            }),
          },

          {
            old: 'Guest',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.NoRoleNoImport',
              defaultMessage: '无对应角色、不导入',
            }),
          },
        ],

        repoAccess: [
          {
            old: 'Owner',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.DatabaseManager',
              defaultMessage: '库管理者',
            }),
          },

          {
            old: 'Master',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.DatabaseManager',
              defaultMessage: '库管理者',
            }),
          },

          {
            old: 'Developer',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.LibraryDeveloper',
              defaultMessage: '库开发者',
            }),
          },

          {
            old: 'Reporter',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.LibraryViewer',
              defaultMessage: '库浏览者',
            }),
          },

          {
            old: 'Guset',
            new: intl.get({
              id: 'code-assets.containers.step1.compareModal.NoRoleNoImport',
              defaultMessage: '无对应角色、不导入',
            }),
          },
        ],
      },
    };
  }

  static getDerivedStateFromProps(props) {
    if (props.trigger) {
      return {};
    }
    return {
      isModalOpen: props.isModalOpen,
    };
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };

  onClose = () => {
    this.setState({
      isModalOpen: false,
    });

    this.props.closeModal();
  };

  render() {
    const { tableMap, isModalOpen, keyMap } = this.state;
    return (
      <React.Fragment>
        {isModalOpen ? (
          <Dialog
            className={`${prefix}`}
            title={intl.get({
              id: 'code-assets.containers.step1.compareModal.UpgradeMappings',
              defaultMessage: '升级映射关系',
            })}
            visible
            style={{ width: '600px' }}
            onClose={this.onClose}
            footer={false}
          >
            <div className={`${prefix}-content`}>
              {Object.keys(tableMap).map((item) => {
                return (
                  <div className={`${prefix}-table`}>
                    <Table dataSource={tableMap[item]}>
                      <Table.Column
                        title={keyMap[item]}
                        dataIndex="name"
                        width={150}
                        cell={() => {
                          return '';
                        }}
                      />

                      <Table.Column
                        title={intl.get({
                          id: 'code-assets.containers.step1.compareModal.OldVersion',
                          defaultMessage: '老版',
                        })}
                        dataIndex="old"
                        width={200}
                      />
                      <Table.Column
                        title={intl.get({
                          id: 'code-assets.containers.step1.compareModal.NewVersion',
                          defaultMessage: '新版',
                        })}
                        dataIndex="new"
                        width={200}
                      />
                    </Table>
                  </div>
                );
              })}
            </div>
          </Dialog>
        ) : null}
        {!!this.props.trigger &&
          React.cloneElement(this.props.trigger, {
            onClick: (e) => {
              this.props.trigger.props.onClick && this.props.trigger.props.onClick(e);
              this.showModal();
            },
          })}
      </React.Fragment>
    );
  }
}
